<template>
  <view class="bd">
    <view class="inp-group" style="">
      <view class="inp-item flex flex-al-c">
        <view class="inp-title" style="width: 160upx">胎动次数</view>
        <input class="inp" type="number" v-model="fetalHeart" />
      </view>
      <view class="inp-item flex flex-al-c">
        <view class="inp-title" style="width: 160upx">开始时间</view>
        <input
          class="inp"
          type="text"
          v-model="startTime"
          disabled
          @tap="showTime(1)"
          placeholder="请选择开始时间"
        />
      </view>
      <view class="inp-item flex flex-al-c">
        <view class="inp-title" style="width: 160upx">结束时间</view>
        <input
          class="inp"
          type="text"
          v-model="endTime"
          disabled
          @tap="showTime(2)"
          placeholder="请选择结束时间"
        />
      </view>
    </view>
    <view style="width: 90%; margin: 100upx auto 0">
      <button
        type="default"
        style="background: #18c7e1; color: #fff"
        @tap="sub"
      >
        保存
      </button>
    </view>
    <u-picker
      v-model="show"
      mode="time"
      :params="params"
      @confirm="getTime"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false,
      },
      show: false,

      startTime: "",
      endTime: "",
      startt: "",
      startt: "",
      endt: "",
      current: 1,
      fetalHeart: "",
    };
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    showTime(num) {
      this.show = true;
      this.current = num;
    },
    getTime(time) {
      let tstr =
        time.year +
        "-" +
        time.month +
        "-" +
        time.day +
        " " +
        time.hour +
        ":" +
        time.minute +
        ":00";
      if (this.current == 1) {
        this.startTime = tstr;
      }
      if (this.current == 2) {
        this.endTime = tstr;
      }
    },
    valid() {
      if (!this.fetalHeart) return false;
      if (!this.startTime) return false;
      if (!this.endTime) return false;
      return true;
    },
    sub() {
      if (!this.valid()) {
        uni.showToast({
          title: "请输入完整的信息",
          icon: "none",
        });
        return;
      }
      const reg = /^[1-9]\d*$/;
      if (!reg.test(this.fetalHeart)) {
        uni.showToast({
          title: "胎动次数输入有误",
          icon: "none",
        });
        return false;
      }
      if (false) {
      } else {
        let self = this;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/heartRate/addHeartRate", {
            fetalHeart: this.fetalHeart,
            startTime: this.startTime,
            endTime: this.endTime,
          })
          .then((res) => {
            //console.log(res)
            uni.hideLoading();
            if (res.data.code === 200) {
              uni.navigateTo({
                url: "/pages/main/pregnant/heart-record",
              });
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inp-group {
  width: 85%;
  margin: 0 auto;

  .inp-item {
    width: 100%;
    margin-top: 10upx;
    padding: 15upx 0;

    .inp-title {
      padding: 15upx 0;
      font-size: 30upx;
      font-weight: 900;
      color: #777;
    }

    .inp {
      width: 80%;
      padding: 15upx 20upx;
      color: #333;
      background-color: #eee;
    }
  }

  .sbtn {
    background: #18c7e1;
    color: #fff;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
    height: calc(100vh - var(--window-top));
  }
  .inp {
    background-color: #38383c !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>